function Diff() {
  return (
    <div>
      <h1>Diff 算法的基本原理</h1>
      <p>React 的 Diff 算法采用了 {'O(n)'} 的事件复杂度，通过一些优化策略有效地减少了对DOM的直接操作。</p>

      <h3>其基本步骤如下：</h3>
      <h4>1. 同一层级比较：</h4>
      <p>a. React 认为 DOM 树中每一层的节点都是独立的，层级比较即在同一层级上进行节点的逐个比较。如果两个节点类型相同，则更新该节点；如果节点类型不同，则删除旧节点，插入新节点。</p>

      <h4>2. 递归比较子树：</h4>
      <p>a. 如果两个节点类型相同，React 会继续递归比较他们的子节点，更新或删除子节点。否则，会跳过该子树的比较，直接销毁并替换掉旧的子树。</p>

      <h4>3. 逐个比较节点的属性：</h4>
      <p>a. 在更新节点时，React 会通过对比新旧节点的属性（如 className，style，children 等），更新节点的属性。如果属性发生变化，React 会只更新变化的部分，而不是重新渲染整个节点。</p>

      <h4>4. 对比元素类型：</h4>
      <p>a. 如果节点类型（比如 div 和 span）不同，React 会销毁旧节点，并创建一个新的节点。通过这种该方式，React 保证不会错误地复用不相干的组件。</p>
    </div>
  )
}

export default Diff